<template>
	<view class="register">
		<view class="register-1">
			<text>输入短信验证码</text>
			</br><text class="wz-1">短信验证码发送至177xxx8342</text>

		</view>
		<view class="register-2">
			<view class="box1" v-for="(item,index) in index" :key="item">
				{{val[index]||``}}
			</view>
			<input class="inp" type="hidden" :maxlength="6" v-model="val" />
		</view>
		<view class="register-3">
			<navigator url="" class="button" @click="reg">下一步</navigator>
			<u-toast ref="uToast" />
		</view>

	</view>
</template>

<script>
	import {
		createNamespacedHelpers
	} from "vuex";
	const {
		mapActions,
		mapState,
		mapMutations
	} = createNamespacedHelpers(
		"user"
	);
	export default {

		async onLoad(options) {
			await (this.telephone = options.telephone)
			await (this.passWord = options.passWord)
			this.send()
		},
		data() {
			return {
				telephone: '',
				passWord: '',
				index: 6,
				val: ''
			}
		},
		methods: {
			...mapActions(['sendMsg', 'register']),
			// 像后端请求验证码
			send() {
				this.sendMsg({
					phoneNo: this.telephone
				})
			},
			// 验证码请求到了就发送所有信息注册
			async reg() {
				if (this.val == '') {

					this.$refs.uToast.show({
						title: '请输入验证码',
						type: 'error',
						url: '/pages/Login/Login'
					})
				} else {
					let obj = {
						telephone: this.telephone,
						passWord: this.passWord,
						sendMessage: this.val
					}
					let result = await this.register(obj)
					if (result.code != 200) {
						this.$refs.uToast.show({
								title: '注册失败！',
								type: 'error',
							},
							setTimeout(() => {
								uni.switchTab({
									url: '/pages/my/my'
								})
							}, 1000)
						)
					} else {
						this.$refs.uToast.show({
								title: '注册成功！',
								type: 'success',
							},
							setTimeout(() => {
								uni.switchTab({
									url: '/pages/my/my'
								})
							}, 1000)
						)
					}
				}

			}

		}
	}
</script>

<style scoped lang="scss">
	.register {
		margin-top: 120rpx;
		width: 750rpx;
		height: 600rpx;
		box-sizing: border-box;
		padding: 0rpx 40rpx;

		// background-color: red;
		.register-1 {
			width: 100%;
			height: 40%;
			font-size: 60rpx;
			font-weight: 800;
			text-align: center;

			.wz-1 {
				font-size: 24rpx;
				color: #d6d6d6;
			}

		}

		.register-2 {
			position: relative;
			width: 100%;
			height: 100rpx;
			border-radius: 15rpx;
			display: flex;
			justify-content: space-between;

			.inp {
				color: rgba(255, 255, 255, 0);
				width: 100%;
				height: 100%;
				// background-color: red;
				position: absolute;
				z-index: 100;
			}

			.box1 {
				width: 15%;
				height: 100%;
				font-size: 28rpx;
				font-weight: 800;
				color: #bcc2cc;
				text-align: center;
				line-height: 100rpx;
				border-bottom: 5rpx solid #cbcbcb;
			}

		}

		.register-3 {
			margin-top: 40rpx;
			width: 100%;
			height: 85rpx;

			.button {
				width: 100%;
				height: 100%;
				border-radius: 15rpx;
				text-align: center;
				line-height: 85rpx;
				font-size: 30rpx;
				font-weight: 700;
				color: #FFFFFF;
				background-color: #3775f6;
			}
		}

	}
</style>
